<template>
    <Layout class="layout-container">
        <Content>
            <Spin fix v-if="loading"></Spin>
            <Form ref="form" :model="value" :rules="rules" label-position="left" :label-width="120">
                <Layout class="layout-container">
                    <Content class="padding-all">
                        <FormItem :label="label.account" prop="account">
                            <Input type="text" v-model="value.account" :placeholder="placeholder.account" />
                        </FormItem>
                        <FormItem :label="label.host" prop="host">
                            <Input type="text" v-model="value.host" :placeholder="placeholder.host" />
                        </FormItem>
                        <FormItem :label="label.displayName" prop="displayName">
                            <Input type="text" v-model="value.displayName" :placeholder="placeholder.displayName" />
                        </FormItem>
                        <FormItem :label="label.password" prop="password">
                            <Input v-model="value.password" icon="ios-eye-outline" :type="passwordType" :placeholder="placeholder.password" @on-click="changePassworeType"></Input>
                        </FormItem>
                        <FormItem :label="label.status" prop="status">
                            <i-switch v-model="value.status" size="large" :true-value="1" :false-value="0">
                                <span slot="open">{{$t('sys.account.active')}}</span>
                                <span slot="close">{{$t('sys.account.locked')}}</span>
                            </i-switch>
                        </FormItem>
                        <FormItem :label="label.memo" prop="memo">
                            <Input v-model="value.memo" type="textarea" maxlength="100" :rows="3" :placeholder="placeholder.memo" />
                        </FormItem>
                    </Content>
                    <div class="padding-all">
                        <span class="pull-right">
                            <Button @click="reset">{{$t('info.reset')}}</Button>
                            <Button type="primary" html-type="submit" @click.prevent="submit">{{$t('info.submit')}}</Button>
                        </span>
                    </div>
                </Layout>
            </Form>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Alert, Spin, Form, FormItem, Button, Input, Switch } from 'view-design';
import { error, extendHtml, deleteNullValue } from 'config/utils';
import { validateForEdit, update } from './api';

export default {
    name: "SysAccountEdit",
    props: {
        params: Object
    },
    data() {
        var label = {
            account: this.$t('sys.account.account'),
            host: this.$t('sys.account.host'),
            hostaccount: this.$t('sys.account.hostaccount'),
            displayName: this.$t('sys.account.displayName'),
            password: this.$t('sys.account.password'),
            status: this.$t('sys.account.status'),
            memo: this.$t('sys.memo')
        };
        var placeholder = {
            account: this.$t('info.placeholder', [label.account]),
            host: this.$t('info.placeholder', [label.host]),
            displayName: this.$t('info.placeholder', [label.displayName]),
            password: this.$t('info.placeholder', [label.password]),
            memo: this.$t('info.placeholder', [label.memo])
        };
        return {
            loading: false,
            plaintext: false,
            value: {
                id: '',
                account: '',
                host: '',
                displayName: '',
                password: '',
                status: 1,
                memo: ''
            },
            label,
            placeholder,
            rules: {
                account: [{
                        label: label.account,
                        required: true,
                        max: 50,
                        trigger: "blur"
                    },
                    {
                        message: this.$t("valid.unique", [label.hostaccount]),
                        validate: (value, rule, label, messages) => {
                            //校验账号是否唯一
                            return new Promise(resolve => {
                                validateForEdit(this.value.id, value, this.value.host, (isOk) => {
                                    resolve(isOk);
                                });
                            });
                        },
                        trigger: "blur"
                    }
                ],
                host: [{
                        label: label.host,
                        max: 255,
                        trigger: "blur"
                    },
                    {
                        message: this.$t("valid.unique", [label.hostaccount]),
                        validate: (value, rule, label, messages) => {
                            //校验账号是否唯一
                            return new Promise(resolve => {
                                if(this.value.account) {
                                    validateForEdit(this.value.id, this.value.account, value, (isOk) => {
                                        resolve(isOk);
                                    });
                                } else {
                                    resolve(true);
                                }
                            });
                        },
                        trigger: "blur"
                    }
                ],
                displayName: {
                    label: label.displayName,
                    required: true,
                    max: 50,
                    trigger: "blur"
                },
                password: {
                    label: label.password,
                    max: 32,
                    trigger: "blur"
                },
                status: {
                    label: label.status,
                    required: true,
                    range: [0, 1],
                },
                memo: {
                    label: label.memo,
                    max: 100,
                    trigger: "blur"
                }
            }
        };
    },
    computed: {
        passwordType() {
            return this.plaintext ? "text" : "password";
        }
    },
    methods: {
        changePassworeType() {
            this.plaintext = !this.plaintext;
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    update(this.value, (res) => {
                        if (res.success) {
                            //删除null字段
                            deleteNullValue(res.data);
                            //回调
                            this.$emit('callback', res.data);
                            //关闭窗口
                            this.$emit('close');
                        } else if (res.code == 1) {
                            error(this.$t("valid.unique", [this.label.hostaccount]));
                        }
                        this.loading = false;
                    });
                }
            });
            return false;
        },
        reset() {
            this.$refs.form.resetFields();
            extendHtml(this.value, this.params);
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.reset();
        });
    },
    components: {
        Layout,
        Content,
        Alert,
        Spin,
        Form,
        FormItem,
        Button,
        Input,
        iSwitch: Switch
    }
}
</script>